<template>
  <el-dialog
    title="企业微信登录"
    :visible.sync="$attrs.visable"
    :width="width"
    :before-close="handleClose"
    :close-on-click-modal='false'
  >
    <div class="flexcenter">
      <div v-if="typeOpen==1" class="login_left p-20">
        <div class="f-14 c_text2 mb-16">
          管理后台系统和电脑版企业微信无法同时登录，使用时请注意以下几点：
        </div>
        <div
          class="infoitem flex aligncenter"
          v-for="(item, index) in infoList"
          :key="index"
        >
          <i class="el-icon-info c_primary mr-6 f-16"></i>
          <span>{{ item.name }}</span>
        </div>
        <div class="warntext">
          <i class="el-icon-info mr-6 f-16"></i>
          以上行为会导致管理后台系统上的企微号掉线，若发生请自行恢复登录
        </div>
      </div>
      <div class="login_right">
        <div class="f-16 c_fff mt-20 flexcenter">企业微信扫码开始使用</div>
        <div v-loading='loading' class="codebox bg_fff flexcolumn aligncenter justifycenter">
          <canvas ref="qrcode" class="qrcodeimg"></canvas>
          <div class="f-14">{{logintext}}</div>
        </div>
        <div class="flexcenter c_fff mb-4">如果扫描二维码失效过期</div>
        <div class="flexcenter c_fff">请点击“重试”按钮</div>
        <div class="reset_btn commhover flexcenter bg_fff c_primary mt-20" @click="getCode">重试</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getCode, checkLoginStatus } from '@/api/system/tgwechat'
import QRCode from 'qrcode'
export default {
  data() {
    return {
      loading:false,
      infoList: [
        { name: "不要登录电脑版企业微信" },
        { name: "不要在企业微信手机端【切换企业】" },
        { name: "不要在企业微信手机端【退出登录】" },
        { name: "不要退出企业微信上方的【已登录】" },
        { name: "不要在其他设备上登录托管的企业微信" },
      ],
      logintext:'二维码加载中,请稍后',
      checkInterval:null,
      uuid:'',
    };
  },
  props:{
    width:{
      type:String,
      default:'840px'
    },
    typeOpen:{
      type:Number,
      default:1
    },
    wxId:{
      type:String,
      default:""
    }
  },
  created(){
    this.$nextTick(()=>{
      this.getCode()
    })
  },
  methods: {
    handleClose() {
      this.stopCheckingLoginStatus()
      this.$emit("close"); //关闭弹窗;
    },

    getCode(){
      // 重试的时候需要先清除一次
      this.stopCheckingLoginStatus()

      this.loading = true
      getCode().then(res=>{
        this.loading = false
        let url = res.data.loginUrl
        this.uuid = res.data.uuid
        if(url){
          QRCode.toCanvas(this.$refs.qrcode, url,{
            width:180,
            margin:1
          })
          this.logintext = ''
          this.startCheckingLoginStatus()
        }
        
      }).catch(()=>{
        this.logintext = '加载失败,请点击重试';
        this.loading = false
      })
      // let url = 'http://www.baidu.com';
      // QRCode.toCanvas(this.$refs.qrcode, url,{
      //   width:180,
      //   margin:1
      // }, error => {
      //   if (error) console.error(error)
      // })
    },

    // 状态检查
    startCheckingLoginStatus() {
      this.checkInterval = setInterval(this.checkLoginStatus, 5000); // 每5秒检查一次
    },

    checkLoginStatus(){
      
      checkLoginStatus({uuid:this.uuid}).then(response=>{
        console.log('response:', response)
        const data = response.data;
        if(data){
          // 扫描了 打开输入验证码的弹窗
          if(data.status == 10){
            this.loginStatusText = '扫码成功！';                        
            this.stopCheckingLoginStatus();
            this.$emit('success',this.uuid)
          }
          if(data.status == 99999){
            this.$emit('success')
            this.$message.success('登录成功')
            this.stopCheckingLoginStatus();
          }
        }
        // if (data.status === 'success') {
        //   this.loginStatusText = '登录成功！';                        
        //   this.stopCheckingLoginStatus();            
        //   // 执行登录成功的后续操作，如跳转到后台系统首页          
        // } else if (data.status === 'pending') {
        //   // 保持当前状态          
        // } else {
        //   this.loginStatusText = '扫码登录失败，请重试。';                    
        //   this.stopCheckingLoginStatus();          
        // }
      })
    },

    stopCheckingLoginStatus() {
      if (this.checkInterval) {
        clearInterval(this.checkInterval);
        this.checkInterval = null;
      }
    },

    handleNodeClick(data) {
      //   console.log('data:',data)
      this.changeData(this.groupList);
      data.checked = true;
    },

    changeData(data) {
      data.forEach((item) => {
        item.checked = false;
        if (item.children && item.children.length)
          this.changeData(item.children);
      });
    },

    handleSubmit() {},
  },
  beforeDestroy() {
    if (this.checkInterval) {
      clearInterval(this.checkInterval); // 清除定时器
    }
  },
};
</script>
<style lang="scss" scoped>
.login_left {
  flex: 1;
  background-color: rgba(47, 84, 235, 0.08);
  margin-right: 20px;
  border-radius: 4px;
}
.login_right {
  width: 260px;
  background: linear-gradient(180deg, #519ff1, #2866de);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.infoitem {
  background-color: #fff;
  border-radius: 2px;
  margin-bottom: 8px;
  padding: 12px 15px 12px 37px;
}
.warntext {
  color: #ff4949;
  padding: 8px 0;
}
.codebox {
  width: 180px;
  height: 180px;
  margin: 16px 0;
  border-radius: 4px;
  color: #666;
  line-height: 22px;
  position: relative;
}
.qrcodeimg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
}
.reset_btn {
  padding: 4px 15px;
  height: 32px;
  border-radius: 4px;
  margin-bottom: 18px;
}
</style>